<template>
  <div class="navbar">
    <div class="center">
      <h2>ToDoList</h2>
      <input type="text" placeholder="添加Todo" v-model="msg" @keyup.enter="send()" />
    </div>
  </div>
</template>

<script>
export default {
  name: "NavBar",
  data() {
    return {
      msg: "",
      isTrue: false
    };
  },
  methods: {
    send() {
      const obj = { msg: this.msg, isTrue: this.isTrue };
      this.$store.commit("add", obj);
      this.msg = "";
    }
  }
};
</script>

<style scoped>
.navbar {
  height: 45px;
  line-height: 4px;
  width: 100%;
  background: rgba(47, 47, 47, 0.98);
}
.center {
  width: 500px;
  margin: 0 auto;
}
.center h2 {
  display: inline-block;
  color: white;
}
.center input {
  width: 240px;
  margin-left: 50px;
  border-radius: 7px;
  text-indent: 5px;
}
</style>